<template>
	<view class="duration-page">
		<view class="title" v-if='typeof title === "string"'>今日使用时长统计(总时长)</view>
		<view class="count">
			<view class="label">总使用时长</view>
			<view class="time">{{totalDuration}}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	defineProps({
		title: {
			type: String
		},
		totalDuration:{
			type:String,
			requried: true
		}
	})
</script>

<style scoped lang="scss">
	.duration-page{
		border-radius: 15upx;
		background: #fff;
		border-radius: 16px 16px 0px 0px;
		border-bottom: 1px solid #f7fbfe;
		padding-bottom: 20upx;
		.title{
			font-weight: 800;
			font-size: 32upx;
			color: #333333;
		}
		.count{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top:20upx;
			.label{
				font-weight: 400;
				font-size: 28upx;
				color: #333333;
			}
			.time{
				font-weight: 800;
				font-size: 28upx;
				color: #3078E5;
			}
		}
	}
</style>